<template>
	<view>
		<view class="head">
			<text>2020-01-01当日首、次、末推：</text>
			<u-radio-group v-model="value" size='50' active-color="#000" @change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="index"
					:class="index==0||2?'radio':''" :name="item.name">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>

		<view class="ping_detail">
			推广介绍
		</view>
		<view class="main">


			<image class="image_shop" src="../../static/users/shopimage.png" mode=""></image>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>

			<view class="xian"></view>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>
		</view>
		
		<view class="submit">
			立即购买
		</view>
		<view class="bottom">

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '首推，100元',
						disabled: false
					},
					{
						name: '次推，100元',
						disabled: false
					},
					{
						name: '末推，100元',
						disabled: false
					}
				],
				value: ""
			}
		},
		methods: {
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}

	.head {
		margin: 30rpx;
		padding: 39rpx 0 0 30rpx;
		width: 690rpx;
		height: 274rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		text {
			margin-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;

		}

		.radio {
			margin: 30rpx 73rpx 0 0rpx;
		}
	}

	.ping_detail {
		margin: 30rpx 0 0 41rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
		height: 40rpx;
		line-height: 40rpx;

		text {
			position: absolute;
			left: 611rpx;
			top: 290rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 40rpx;
		}

		image {
			margin-left: 10rpx;
			width: 10rpx;
			height: 18rpx;
			line-height: 40rpx;
		}
	}

	.token {
		margin: 11rpx 0 0 30rpx;
		width: 690rpx;
		height: 204rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		position: relative;

		image {
			margin: 19rpx 0 0 30rpx;
			width: 88rpx;
			height: 88rpx;
		}

		.head {
			position: absolute;
			left: 139rpx;
			top: 30rpx;
			width: 400rpx;
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.yang_s {
			position: absolute;
			top: 70rpx;
			left: 139rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
		}

		.date {
			position: absolute;
			top: 41rpx;
			right: 29rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #999999;
		}

		.content {
			margin: 19rpx 0 0 31rpx;
			width: 628rpx;
			height: 60rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #000000;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.image_shop {
		margin: 10rpx 0 0 0rpx;
		width: 690rpx;
		height: 368rpx;
	}

	.bottom {
		width: 750rpx;
		height: 400rpx;
	}

	.explain {
		margin: 59rpx 0 0 41rpx;
		width: 610rpx;
		height: 230rpx;
        
		.text1 {
			font-size: 24rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #777777;
			margin-bottom: 30rpx;
		}

		.text2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.text3 {
			margin-top: 25rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

	}

	.xian {
		margin: 10rpx 0 0 71rpx;
		width: 610rpx;
		height: 1rpx;
		background: #EEEEEE;
	}
	
	.main{
		margin:0 auto;
		width: 690rpx;
		background-color: #fff;
	}
	.submit{
		position: fixed;
		left: 30rpx;
		bottom: 50rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0rpx rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
